/* @media screen and (min-width:0\0) */

@charset'utf-8';
@import'theme';
@import'color';
@import'model-beta';
@import'common';
html, body {
    width: 100%;
    height: 100%;
}
* {
    margin: 0 auto;
    font-family: 'icomoon', "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif!important;
}
._topblock {
    width: 100%;
    height: 3rem;
}
._menublock {
    position: fixed;
    width: 100%;
    height: 0;
    z-index: 998;
    top: 0;
    left: 0;
    &.focus {
        height: 100%;
    }
}
._top {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 3rem;
    background-color: $themeColor;
    color: $fontColor;
    // box-shadow: 0 1px 6px 0 $black;
    line-height: 3rem;
    box-shadow: 0 0 10px 1px rgba($gray, 0.6);
    ._top_left {
        display: inline-block;
        vertical-align: top;
        width: 46%;
        padding: 0 2%;
        a {
            text-align: center;
            display: inline-block;
            vertical-align: top;
            height: 3rem;
            width: 3rem;
            line-height: 3rem;
        }
    }
    ._top_right {
        display: inline-block;
        ;
        vertical-align: top;
        width: 46%;
        padding: 0 2%;
        text-align: right;
        a {
            text-align: center;
            display: inline-block;
            vertical-align: top;
            height: 3rem;
            width: 3rem;
            line-height: 3rem;
        }
    }
}
._menu {
    position: fixed;
    z-index: 999;
    left: 0;
    top: -10rem;
    width: 100%;
    text-align: center;
    // box-shadow: 0 1px 6px 0 $black;
    @include comic_1(0.1, 0);
    &.focus {
        top: 3rem;
    }
    ._menu_item {
        height: 2.5rem;
        line-height: 2.5rem;
        border-top: 1px solid $white;
        background-color: $themeColor;
        a {
            color: $fontColor;
        }
    }
}
.mainbox {
    width: 96%;
    padding: 1.5rem 2%;
    @include breakLine;
    overflow: hidden;
    div.btn {
        margin: 1rem auto;
    }
    .pinfo {
        vertical-align: top;
        margin-right: 10%;
        width: 94%;
        overflow: hidden;
        border-radius: 2px;
        padding: 1rem 3%;
        display: inline-block;
        margin-left: 0;
        background-color: rgba($white, 0.7);
        box-shadow: 0 0 10px 1px rgba($gray, 0.5);
        @include newLine;
        @include comic_1(0.25, 0);
        &.pwd {
            margin-left: -110%;
        }
        &.addr {
            margin-left: -220%;
        }
        .addritem {
            width: 95%;
            @include newLine();
            margin: 0.5rem auto;
            padding: 0.5rem 2%;
            color: $black;
            box-shadow: 0 0 10px 1px rgba($gray, 0.5);
            @include comic_1(0.35, 0);
            border-radius: 2px;
            overflow: hidden;
            &.focus {
                background-color: rgba($themeColor, 0.5);
                color: $fontColor;
            }
            &.remove {
                background-color: rgba($btnHover, 0.5) !important;
                color: $fontColor;
            }
        }
        div.btn {
            margin-right: 1rem;
        }
        .newaddr {
            width: 90%;
            padding: 0;
            height: 0;
            overflow: hidden;
            box-shadow: 0 0 0 0px rgba($gray, 0);
            @include comic_1(0.25, 0);
            select {
                margin-right: 0.5rem;
                max-width: 7rem;
            }
            &.focus {
                padding: 1rem 4%;
                height: 290px;
                box-shadow: 0 0 10px 1px rgba($gray, 0.7);
            }
        }
        imguploaderwrap {
            margin: 0.5rem;
            display: inline-block;
            vertical-align: top;
            .click-to-add {
                color: $themeColor;
                border: 2px dotted $btnHover;
            }
        }
    }
    .pointitem {
        width: 98%;
        vertical-align: top;
        margin-right: 9%;
        background-color: $white;
        box-shadow: 0 0 10px 1px rgba($gray, 0.3);
        @include comic_1(0.2, 0);
        margin-left: 1%;
        &.shoppinguide {
            margin-left: -107%;
        }
        p {
            padding: 0.5rem 2%;
            font-style: italic;
        }
        .pitem {
            width: 92%;
            padding: 0.5rem 2.5%;
            box-shadow: 0 0 10px 1px rgba($gray, 0.4);
            margin: 0.7rem auto;
            .L-input {
                margin-bottom: 15px;
            }
        }
        .ptitle {
            width: 97%;
            color: $themeColor;
            margin: 0.5rem auto;
            font-size: 16px;
        }
        .item {
            width: 100%;
            padding: 0.5rem 2%;
            line-height: 1.5rem;
            .i {
                display: inline-block;
                width: 48%;
                margin-right: 2%;
                .price {
                    color: $red;
                }
            }
            .pastetitle {
                font-size: 15px;
                color: $btnHover;
            }
            .paste {
                @include newLine;
                line-height: 1.5rem;
                margin: 0.3rem 0;
            }
            .info {
                color: $themeColor;
                font-style: italic;
                text-shadow: 0 0 3px $grayLight;
            }
        }
    }
    .sitem {
        margin-bottom: 1.5rem;
        box-shadow: 0 0 10px 1px rgba($gray, 0.5);
        border-radius: 2px;
        white-space: normal;
        width: 96%;
        padding: 0.5rem 2%;
        background-color: rgba($white, 0.6);
        .stitle {
            color: $themeColor;
            margin: 0.5rem 0;
            font-size: 16px;
            @include Line(1);
        }
        imguploaderwrap {
            margin: 0.5rem;
            display: inline-block;
            vertical-align: top;
            .click-to-add {
                color: $themeColor;
                border: 2px dotted $btnHover;
            }
        }
        .pitem {
            width: 92%;
            padding: 0.5rem 2.5%;
            box-shadow: 0 0 10px 1px rgba($gray, 0.4);
            margin: 0.7rem auto;
        }
        .item {
            width: 96%;
            padding: 0.5rem 2%;
            line-height: 1.5rem;
            .i {
                vertical-align: top;
                display: inline-block;
                width: 48%;
                margin-right: 2%;
                .price {
                    color: $red;
                }
            }
            .info {
                color: $themeColor;
                font-style: italic;
                text-shadow: 0 0 3px $grayLight;
            }
            .imgset{
                display: inline-block;
                width: 20%;
                vertical-align: top;
                img{
                    width: 100%;
                }
            }
            .gminfo{
                line-height: 1.5rem;
                display: inline-block;
                vertical-align: top;
                width: 78%;
                margin-left: 2%;
                .price {
                    color: $red;
                }
                .text{
                    @include Line(1);
                }
            }
        }
        .titem {
            @include newLine;
            margin: 0.5rem 0;
            line-height: 23px;
            .tag {
                line-height: 13px;
                padding: 0.3rem 0.5rem;
                display: inline-block;
                border-radius: 2px;
                margin: 0.3rem;
                vertical-align: top;
                background-color: $themeColor;
                color: $fontColor;
                box-shadow: 0 1px 6px 0 rgba($gray, 0.6);
            }
            .L-input {
                margin-bottom: 15px;
            }
        }
        div.btn {
            margin-top: 5px;
            margin-right: 10px;
        }
    }
}
.cgoods {
    width: 96%;
    padding: 0.5rem 2%;
    .gtitle {
        font-size: 15px;
        @include Line(1);
        margin-bottom: 1rem;
        color: $black;
    }
    .img {
        display: inline-block;
        margin-right: 0.5rem;
    }
}
.comments {
    width: 96%;
    padding: 0.5rem 2%;
    background-color: rgba($white, 0.5);
    border-radius: 2px;
    box-shadow: 0 0 10px 1px rgba($gray, 0.3);
    .box {
        margin-top: -2rem;
    }
}
.orderitem {
    width: 100%;
    box-shadow: 0 0 10px 0 rgba($gray, 0.5);
    margin: 1rem auto;
    line-height: 20px;
    border-radius: 2px;
    overflow: hidden;
    .orderinfo {
        padding: 0.5rem;
        background-color: $themeColor;
        color: $fontColor;
        .item {
            @include Line(1);
            margin: 0.5rem 0;
            .method {
                font-style: italic;
                color: $btnHover;
                font-weight: bold;
                text-shadow: 0 0 3px $gray;
            }
        }
    }
    .ordergoods {
        background-color: $white;
        color: $black;
        .item {
            margin: 0.3rem auto;
        }
        padding: 0.5rem;
        .img {
            display: inline-block;
            width: 20%;
            height: 40px;
            img {
                height: 40px;
                weight: 40px;
            }
        }
        .info {
            display: inline-block;
            width: 80%;
            div {
                @include Line(1);
            }
        }
    }
}
._comment {
    padding: 1rem 2%;
    width: 96%;
    .commentitem {
        margin: 0.7rem auto;
        width: 100%;
        overflow: hidden;
        box-shadow: 0 0 10px 0 rgba($gray, 0.3);
        border-radius: 2px;
        .obj {
            width: 94%;
            padding: 0.5rem 3%;
            background-color: $themeColor;
            color: $fontColor;
            .item {
                line-height: 2rem;
                .i {
                    vertical-align: top;
                    display: inline-block;
                    width: 48%;
                    margin-right: 2%;
                    @include Line(1);
                }
            }
        }
        ._reply {
            width: 94%;
            padding: 0.5rem 3%;
            background-color: $white;
            .replyitem {
                width: 100%;
                .replychild {
                    width: 94%;
                    box-shadow: 0 0 6px 0 rgba($gray, 0.3);
                    margin: 0.5rem auto;
                    padding: 0.3rem 3%;
                    @include newLine;
                    line-height: 20px;
                    .replyer {
                        line-height: 2rem;
                    }
                }
            }
            .L-input {
                margin-bottom: 1.5rem;
            }
        }
    }
}
.bottom-nav {
    position: fixed;
    z-index: 999;
    width: 96%;
    bottom: 0;
    left: 0;
    padding: 1rem 2%;
    background-color: $white;
    box-shadow: 0 -2px 20px 0 rgba($gray, 0.2);
    @include comic_1(0, 0);
    * {
        @include comic_1(0.15, 0);
    }
    .mainmenu {
        display: inline-block;
        vertical-align: top;
        width: 10%;
        height: 2rem;
        .icon-menu {
            line-height: 2rem;
            width: 2rem;
            height: 2rem;
        }
    }
    .innertitle {
        display: inline-block;
        vertical-align: top;
        width: 90%;
        line-height: 2rem;
        height: 2rem;
        text-align: center;
    }
    .navbox {
        width: 100%;
        line-height: 2rem;
        text-align: center;
        height: 0;
        overflow: hidden;
        &.focus{
            height: auto;
            .navi{
                // display: inline-block;
                height: 70px;
                margin: 0.7rem;
                .navitop{
                    height: 70px;
                }
            }
        }
        .navi {
            display: inline-block;
            vertical-align: top;
            position: relative;
            width: 70px;
            height: 0;
            padding: 0;
            margin: 0;
            background-color: $white;
            box-shadow: 0 1px 5px #aaa;
            // @include comic_1(0.3, 0);
            color: $black;
            [class^="icon-"]:before, [class*=" icon-"]:before {
                font-size: 25px;
                font-weight: lighter;
                line-height: 41px;
            }
            &.focus {
                width: 100%;
                margin: 0.7rem 0;
                background-color: rgba($themeColor,0.3);
                padding: 0.5rem 0;
                .navitop {
                    width: 0;
                    height: 0;
                    left: 50%;
                    top: 50%;
                }
                .navibottom {
                    width: 100%;
                    height: 70px;
                    left: 0;
                    top: 0.5rem;
                    a{
                        color: $black;
                    }
                    .navis {
                        width: 70px;
                        height: 70px;
                        box-shadow: 0 1px 5px #aaa;
                    }
                }
            }
            .navitop {
                position: absolute;
                z-index: 2;
                width: 70px;
                height: 0;
                top: 0;
                left: 0;
                // background-color: $cyan;
                // @include comic_1(0.1, 0);
                overflow: hidden;
            }
            .navibottom {
                width: 0;
                height: 0;
                position: absolute;
                z-index: 1;
                top: 35px;
                left: 35px;
                
                @include comic_1(0.3, 0);
                .navis {
                    width: 0;
                    height: 0;
                    margin: 0 1rem;
                    // @include comic_1(0.3, 0);
                    box-shadow: 0 0 0 $white;
                    background-color: $white;
                    display: inline-block;
                    vertical-align: top;
                    overflow: hidden;
                }
            }
        }
        // .navitem {
        //     border-radius: 2px;
        //     overflow: hidden;
        //     width: 96%;
        //     height: 0;
        //     box-shadow: 0 0 0 0 rgba($gray, 0);
        //     margin: 0rem auto;
        //     color: $black;
        //     &.focus {
        //         height: 2rem;
        //         margin: 0.5rem auto;
        //         box-shadow: 0 0 7px 0 rgba($gray, 0.2);
        //     }
        // }
        // .childmenu {
        //     width: 95%;
        //     overflow: hidden;
        //     padding: 0rem;
        //     height: 0;
        //     text-align: center;
        //     .item {
        //         .icon-file, .icon-truck, .icon-credit, .icon-office, .icon-key, .icon-coin, .icon-users {
        //             height: 35px;
        //             width: 35px;
        //             &:before {
        //                 font-size: 35px;
        //             }
        //         }
        //         display: inline-block;
        //         width: 55px;
        //         vertical-align: top;
        //         height: 55px;
        //         padding: 10px;
        //         margin: 0 10px;
        //         background-color: $themeColor;
        //         box-shadow: 0 1px 10px 1px rgba($gray, 0.5);
        //         border-radius: 2px;
        //         overflow: hidden;
        //         color: $fontColor;
        //     }
        //     &.focus {
        //         padding: 0.5rem;
        //         height: 80px;
        //     }
        // }
    }
}
.bottomnavblock {
    height: 70px;
}
.btn {
    padding: 0.3rem 1rem;
    border: 0;
    outline: none;
    background-color: $themeColor;
    color: $fontColor;
    border-radius: 2px;
    text-align: center;
}
div.btn {
    padding: 0;
}
.L-input {
    margin-bottom: 40px;
    inputPlaceholder {
        top: -2px;
        font-size: 14px;
    }
    inputdescription {
        top: 22px;
    }
    input:focus, input.focus {
        outline: none;
        box-shadow: none;
        + inputPlaceholder {
            color: $black;
            font-size: 16px !important;
            font-weight: 300;
            top: -22px;
            -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
            -moz-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
            -o-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
            transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
        }
    }
    input:not(:focus):valid + inputPlaceholder {
        color: #808080;
        font-size: 14px !important;
        font-weight: 300;
        top: -22px;
        transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    }
}
